<template>
    <div class="login_page">
        <TABLE cellSpacing=0 cellPadding=0 width="100%">
            <TBODY>
            <TR>
                <TD :style="{background: 'url('+ Img +')'}">
                    <img height="86" :src="logo" width="1020" alt="">
                </TD>
            </TR>
            <TR>
                <TD height=20>&nbsp;</TD>
            </TR>
            </TBODY>
        </TABLE>
        <TABLE cellSpacing=0 cellPadding=0 width="100%">
            <TBODY>
            <TR>
                <TD height=3></TD>
            </TR>
            <TR>
                <TD height=2></TD>
            </TR>
            <TR>
                <TD>&nbsp;</TD>
            </TR>
            </TBODY>
        </TABLE>
        <TABLE cellSpacing=0 cellPadding=8 width="100%">
            <TBODY>
            <TR>
                <TD vAlign=top width=250 height=422>
                    <TABLE height=179 cellSpacing=0 cellPadding=0 width="100%">
                        <TBODY>
                        <TR>
                            <TD vAlign=top width="95%">
                                <TABLE cellSpacing=10 cellPadding=10 width="100%">
                                    <TBODY>
                                    <TR>
                                        <TD width="40%" style="vertical-align: top;">
                                            <!-- 登录框模块 start-->
                                            <div class="login-box">
                                                <div class="login-title"><h3>登录</h3></div>
                                                <div class="login-from">
                                                    <el-row>
                                                        <el-col :span="24">
                                                            <el-form status-icon
                                                                :label-position="labelPosition"
                                                                :model="loginForm"
                                                                :rules="rules"
                                                                ref="loginForm"
                                                                label-width="80px"
                                                                class="demo-loginForm">
                                                                <el-form-item label="用户名：" prop="userName">
                                                                    <el-input autocomplete="off"
                                                                            placeholder="请输入用户名"
                                                                            v-model="loginForm.userName"
                                                                            :autofocus="true"
                                                                            v-on:keyup.enter.native="login"></el-input>
                                                                </el-form-item>
                                                                <el-form-item label="密码：" prop="password">
                                                                    <el-input type="password"
                                                                            autocomplete="off"
                                                                            placeholder="请输入密码"
                                                                            v-model="loginForm.password"
                                                                            v-on:keyup.enter.native="login">
                                                                    </el-input>
                                                                </el-form-item>
                                                            </el-form>
                                                        </el-col>
                                                        <el-col :span="16">
                                                            <div class="el-form-item__error login_error">
                                                                <span v-show="errorMsg">{{errorMsg}}</span>
                                                            </div>
                                                        </el-col>
                                                        <el-col :span="8">
                                                            <div class="login-btn">
                                                                <el-button type="danger" @click="login">登录</el-button>
                                                            </div>
                                                        </el-col>
                                                    </el-row>
                                                </div>
                                            </div>
                                            <!-- 登录框模块 end-->
                                        </TD>
                                        <TD width="60%">
                                            <TABLE cellSpacing=0 cellPadding=0 width=684>
                                                <TBODY>
                                                <TR>
                                                    <TD vAlign=top align=left colSpan=3>
                                                        <IMG height=34
                                                             :src="xtsm"
                                                             width="684"/></TD>
                                                </TR>
                                                <TR>
                                                    <TD class=txt_black
                                                        vAlign=center
                                                        align=left
                                                        colSpan=3
                                                        height=76>&nbsp;&nbsp;&nbsp;&nbsp;中信保诚个险营运系统集中管理保单相关业务，目前具备综合查询功能，将来还会继续开发快速核保、保户服务和理赔作业等功能。
                                                    </TD>
                                                </TR>
                                                <TR>
                                                    <TD vAlign=top align=left colSpan=3 height=69>
                                                        <IMG
                                                                height=227
                                                                :src="xtsm1"
                                                                width="684"/></TD>
                                                </TR>
                                                <TR>
                                                    <TD vAlign=top align=left width=17 height=25>
                                                        <IMG
                                                                height=29
                                                                :src="Corner3"
                                                                width="17"/></TD>
                                                    <TD width=671
                                                        :style="{background: 'url('+ cornerLine +')'}"
                                                    >&nbsp;
                                                    </TD>
                                                    <TD width=17><IMG height=29
                                                                      :src="Corner4"
                                                                      width="17"/></TD>
                                                </TR>
                                                </TBODY>
                                            </TABLE>
                                        </TD>
                                    </TR>
                                    </TBODY>
                                </TABLE>
                                <TABLE cellSpacing=0 cellPadding=0 width="100%"
                                       style="margin-top: 25px;" class="footer">
                                    <TBODY>
                                    <TR>
                                        <TD align=middle bgColor=#6699ff height=35>&nbsp;&nbsp;<SPAN
                                                class=bai_zi>Copyright &copy; 2008 中信保诚人寿保险有限公司版权所有</SPAN><SPAN
                                                class=bai_zi>&nbsp;&nbsp;</SPAN></TD>
                                    </TR>
                                    </TBODY>
                                </TABLE>
                            </TD>
                        </TR>
                        </TBODY>
                    </TABLE>
                </TD>
            </TR>
            </TBODY>
        </TABLE>
    </div>
</template>
<script>
  import Img from "@/assets/img/login/red_right.jpg";
  import logoImg from "@/assets/img/login/red_top.png";
  import Xtsm from "@/assets/img/login/xtsm.png";
  import Xtsm1 from "@/assets/img/login/xtsm1.png";
  import cornerLine from "@/assets/img/login/corner_line2.jpg";
  import Corner3 from "@/assets/img/login/corner3.jpg";
  import Corner4 from "@/assets/img/login/corner4.jpg";

  import {doLogin, getPower} from "@/api/user";
  import {setCookie} from "../utils/auth";
  import constant from "../utils/constant";
  import {getStore,setStore} from '@/utils/mUtils.js'
  export default {
    data() {
      return {
        labelPosition: 'top',
        logo: logoImg,
        Img: Img,
        xtsm: Xtsm,
        xtsm1: Xtsm1,
        cornerLine: cornerLine,
        Corner3: Corner3,
        Corner4: Corner4,
        loginForm: {
          userName: '',
          password: ''
        },
        errorMsg:'',
        rules: {
          userName: [
            { required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur'}
          ]
        }
      }
    },
    created: function() {
    },
    methods: {
      // subFrom(formName){
      // 	this.$refs[formName].validate((valid) => {
      // 	if (valid) {
      // 		this.$router.push({path:'/'})
      // 	} else {
      // 		console.log('error submit!!');
      // 		return false;
      // 	}
      // 	});
      // }

      login() {
        let _this = this;
        if (this.loginForm.userName === '' || this.loginForm.password === '') {
          return;
        } else {
            let obj={};
            obj.password=this.loginForm.password;
            obj.userCode=this.loginForm.userName;
          this.$store.dispatch('loading/CHANGE_LOADING', true);
					this.errorMsg='';
					let tmp = getStore('newUndr_randomStr');
					localStorage.clear();
					let data = {
						token: '12340',
						userKeyInfo: {
								"account": "admin",
								"aeCorpid": "",
								"chinesename": "test",
								"corpid": "610",
								"corpname": "总公司",
								"email": "1",
								"englishname": "Suey Wang",
								"id": "CHN0000136",
								"orgnizationid": "2438",
								"orgnizationname": "营运部",
								"state": "1",
								"telephone": ""
						}
					}
					data['newUndr_randomStr']=tmp;
					this.$store.dispatch('LogOut', {});
					sessionStorage.setItem("loginForm",JSON.stringify(this.loginForm))
          this.$store.dispatch('saveUserLogin', data);
					_this.$router.push('/home/taskHome').catch(data => { });
					// return
          doLogin(obj).then(res => {
            this.$store.dispatch('loading/CHANGE_LOADING', false);
            if (res.resultCode == constant.SUCCESS && res.data) {
              this.errorMsg='';
			  let tmp = getStore('newUndr_randomStr');
              localStorage.clear();
			  res.data['newUndr_randomStr']=tmp;
              this.$store.dispatch('LogOut', {});
              sessionStorage.setItem("loginForm",JSON.stringify(this.loginForm))
              this.$store.dispatch('saveUserLogin', res.data);

              // 契约影像下载权限添加  start
              getPower(obj.userCode).then(res => {
                if (res.resultCode == constant.SUCCESS && res.data) {
                  this.errorMsg='';
                  sessionStorage.setItem("downloadPower", "false");
                  if (JSON.stringify(res.data).indexOf("ISMS.M5") > 0) {
                    sessionStorage.setItem("downloadPower", "true");
                  }
                } else {
                  this.errorMsg=res.resultMsg;
                }
              }).catch(err => {
                console.log(err);
              });
              // 契约影像下载权限添加  end

              _this.$router.push('/home/taskHome').catch(data => { });
            }else{
                this.errorMsg=res.resultMsg;
            }
          }).catch(err => {
            console.log(err);
                this.errorMsg=err.resultMsg;
            this.$store.dispatch('loading/CHANGE_LOADING', false);
          });
        }
      },

    }
  }
</script>
<style lang="less" scoped>
    .login_page {
        height: 97vh;
        // position: relative;
    }

    .footer {
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
    }

    .login-box {
        width: 300px;
        background: #e8e8e8;
        border-radius: 4px;
        box-shadow: 0 0 5px #e5e5e5;
        border: 1px solid #e1e1e1;
        border-top: none;
        margin-left: 120px;

        .login-title {
            h3{
                text-align: left;
                padding-left: 20px;
                border: 1px solid #e1e1e1;
                height: 28px;
                line-height: 28px;
                color: #f76767;
                // background-color: #fff;
                background-image: linear-gradient(#f9f9f9, #fff);
                border-bottom-left-radius:8px;
                border-bottom-right-radius:8px;
                border-top-left-radius:4px;
                border-top-right-radius:4px;
            }
        }

        .login-from {
            padding: 20px 20px 0px 20px;

            .el-input--mini .el-input__inner {
                height: 32px;
                line-height: 32px;
                border-radius: 4px;
            }
            .el-form--label-top .el-form-item__label{
                padding: 0 0 0 0!important;
            }
            .el-input__inner{
                box-shadow: 0 0 0 #e8e8e8!important;
            }
        }

        .login-btn {
            text-align: center;
            // border-top: 1px solid #DCDFE6;
            padding: 10px 0 20px;
            .el-button--danger {
                padding: 7px 20px;
                border-radius: 20px;
            }
        }
    }

    table {
        border-spacing: 0;
        background-color: transparent;
        .bai_zi{
            color: #fff;
        }
    }
    .login_error{
        position: relative;
        text-align: center;
        height:20px;
    }
</style>
